const OrderHandle = () => {

  const [ data, setData ] = useState(list);

  const [ scrollIndex, setScrollIndex ] = useState(undefined);
  
  const rowRender = ({index, isScrolling, key, style}) => {

    if (isScrolling) {
      return (
        <div
          key={key}
          style={style}>
          数据加载中...
        </div>
      );
    }

    const datum = data[index];

    return (
      <div className={styles.row} key={key} style={style}>
        <div
          className={styles.letter}
          style={{
            backgroundColor: datum.color,
          }}>
          {datum.name.charAt(0)}
        </div>
        <div>
          <div className={styles.name}>{datum.name}</div>
          <div className={styles.index}>This is row {index}</div>
        </div>
      </div>
    );
  }

  const VListProps = {
    scrollToIndex: scrollIndex,
    rowRender,
    rowCount: data.length,
    minWidth: 1200,
    style: {minWidth: '900px', overflowX: 'auto', width: '100%' }
  }

  return (
    <div style={{ minWidth: '900px', overflowX: 'auto' }}>
      <div style={{ width: '1200px' }}>这his头部</div>
      <VList { ...VListProps } />
    </div>
  )
}